<template>
    <div class="wechat-menu-list">
        <h1>食品管理</h1>
        <router-link to="/food/add" class="el-button el-button--primary">添加食品</router-link>

        <el-table :data="list" style="width: 100%" v-loading="loading">
            <el-table-column prop="name" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="species" label="分类" width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button @click="editFood(scope.row.id)" type="text" size="small" >编辑</el-button>
                    <el-button @click="deleteFood(scope.row.id)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="count">
        </el-pagination>


    </div>
</template>

<script>

    export default {
        name: 'wechat-menu-list',
        data() {
            console.log(this.$route.params.page);
            return {
                currentPage:1,
                count:0,
                loading:true,
                apiUrl: apiUrl,

                //分类列表
                list:[]

            }
        },

        mounted() {
            this.$nextTick(function () {
                this.currentPage = this.$route.params.page;
                this.load(1); //概况
            })
        },
        methods: {
            editFood(id){
                this.$router.push('/food/edit/'+id);
            },
            deleteFood(id){
                var url = this.apiUrl + 'Food/delete';
                this.$http.get(url, {
                    params: { id: id }
                }).then(response => {
                    if(response.data.status==1){
                        this.$message.success('删除成功');
                        this.load();
                    }else{
                        this.$message.error('删除失败');
                    }
                }, response => {
                    this.$message.error('删除失败');
                    console.log(response);
                });
            },
            //概况数据获取
            load(page) {
                this.$http.get(this.apiUrl + 'Food/foods?page='+page).then(response => {
                    this.loading = false;
                    console.log(response.data);
                    this.list = response.data.list;
                    this.count = response.data.count;
//                    this.currentPage = this.$route.params.page ? this.$route.params.page : 1;
                }, response => {
                    this.$message.error('加载失败');
                    console.log(response);
                });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.$router.push('/food/list/'+val);
                this.load(val);
            }

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
